<template>
  <div>
    <!-- 利用input事件将值传递给父组件 -->
    <input type="text" placeholder="请输入心愿" :value="value" @input="changeVal" />
  </div>
</template>

<script>
export default {
  props: ["value"],
  methods: {
    changeVal(e) {
      //需要用到event对象获取input的value
      //e.target是触发事件的元素 e.target.value可以获取input框的值
      // v-model绑定的是value属性，监听的是input事件
      // console.log(e)
      this.$emit("input", e.target.value)
    },
  },
}
</script>

<style lang="scss" scoped>
input {
  height: 32px;
  width: 70%;
  display: block;
  // 转换成block才可以使用margin
  margin: 10px auto;
}
</style>
